<template>
  <div class="layout_container">
    <Header @searchlist = 'searchlist'/>
    <div class="middle">
      <Aside @showWhichComFun="showWhichComFun" />
      <div class="content" :style="{'height': `${contentHeight}px`}">
        <SliderBanner  v-if="showWhichCom == 'SliderBanner' "/>
        <Live v-if="showWhichCom == 'Live'" />
        <Video v-if="showWhichCom == 'Video'" />
        <Friend v-if="showWhichCom == 'Friend'" />
        <Playlist :listData="listData" v-if="showWhichCom == 'search'" @geturl='geturl' />
      </div>
    </div>
    <div class="bottom">
      <!-- <el-affix :offset="20" target=".layout_container"> -->
          <Footer :url='url' />
      <!-- </el-affix> -->
    </div>
  </div>
</template>

<script>
import Aside from "@/components/Aside/aside.vue";
import Header from "/src/components/Header/Header";
import Footer from "/src/components/Footer/Footer";
import SliderBanner from "./home/home.vue";
import Playlist from "./search/Playlist.vue";
import Live from "./live/Live.vue";
import Video from "./video/video.vue";
import Friend from "./friend/friend.vue";

import get from "../utils/axios/index";
export default {
  name: "Layout",
  components: {
    'SliderBanner': SliderBanner,
    'Aside': Aside,
    'Live': Live,
    'Video': Video,
    'Friend': Friend,
    'Header': Header,
    'Footer': Footer,
    'Playlist': Playlist
  },
  data() {
    return {
      showWhichCom: "SliderBanner",
      listData:[],
      url:'',
      contentHeight: 800,
    };
  },
  methods: {
    showWhichComFun(val) {
      this.showWhichCom = val.compName;
    },
    searchlist(val){
      this.showWhichCom = 'search'
      this.listData = val
    },
    geturl(val){
      this.url=val
    },
    getdata() {
      
    }
  },
  mounted() {
    this.getdata();
  }
};
</script>
<style lang='scss' scoped>
* {
  margin: 0;
  padding: 0;
}
@font-face {
  font-family: "iconfont"; /* Project id 2528550 */
  src: url("//at.alicdn.com/t/font_2528550_8eo6drkxr9b.woff2?t=1620717183679")
      format("woff2"),
    url("//at.alicdn.com/t/font_2528550_8eo6drkxr9b.woff?t=1620717183679")
      format("woff"),
    url("//at.alicdn.com/t/font_2528550_8eo6drkxr9b.ttf?t=1620717183679")
      format("truetype");
}


.middle {
  width: 100%;
  height: 100%;
}
.content {
  float: left;
  text-align: center;
  width: 90%;
  box-sizing: border-box;
  overflow: scroll;
}
</style>
